<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>北风编程</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='layui/css/layui.css',t='1483944306685') }}" media="all">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/story.css',t='1483944306685') }}" media="all">
    <style>
        .practice_info, .practice_content, .practice_footer, .practice_rw {
            color: #fff;
            padding: 10px;
        }

        #practice_defalut_left {
            flex-shrink: 0;
            height: 100%;
            background-color: #fff;
        }

        #practice_defalut_left section {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            height: 100%;
        }

        #practice_defalut_left section .main {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            overflow-y: auto;
            overflow-x: hidden;
            display: flex;
            width: 100%;
            height: 100%;
        }

        .practice_info {
            padding: 24px 40px;
            height: 100px;
            background: #A020F0;
            line-height: 30px;
        }

        .practice_content {
            background-color: white;
            height: 100%;
            color: #000;
            display: block;
            padding-left: 40px;
            padding-right: 40px;
            padding-bottom: 140px;
        }

        .practice_content div {
            display: inline-block;
            width: 100%;
            height: 100%;
            font-size: 16px;
            overflow: hidden;
        }

        .practice_remark {
            margin-right: 10px;
        }

        .practice_footer {
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            position: absolute;
            bottom: 0;
            left: 0;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            background: #fff;
            padding: 24px 0;
            -webkit-box-shadow: 0 2px 20px 0 rgba(60, 54, 98, .2);
            box-shadow: 0 2px 20px 0 rgba(60, 54, 98, .2);
        }

        .practice_footer button {
            width: 360px;
            height: 48px;
            border-radius: 28px;
            background-color: #ffac5e;
            font-size: 16px;
            font-weight: 500;
            color: #fff;
            cursor: pointer;
            -webkit-transition: background-color .2s;
            transition: background-color .2s;
        }
        .practice_content div h1,.practice_content div p,.practice_rw div h1,.practice_rw div p{
            font-weight: 500;
            line-height: 1.23;
            margin-top: 48px;
            margin-bottom: 48px;
        }
        .hide_div {
            display: none;
        }
        #practice_content{
            height: 100%;
            background-color: white;
        }
        #practice_content>div{
            display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        min-height: 0;
        }
        #practice_content>div section{
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding: 40px 40px 150px 52px;
        }
    </style>
</head>
<body>
<div class="layui-header header header-doc" style="display: flex">
    <div class="layui-nav" style="height:59px;;width: 100%;">
        <div class="layui-col-md2 layui-nav-item-new"><a href="#"
                                                         onClick="javascript:window.history.back();return false;"><i
                class="layui-icon layui-icon-left"></i> 返回</a></div>
        <div class="layui-col-md10">
            <div class="layui-main">
                <div class="layui-col-md2 layui-nav-item-new">
                    <button class="layui-btn">
                        {{ practice_info.practive_lesson_info.name }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div class="layui-row">
        <div class="layui-col-md4" id="practice_defalut_left">
            <section>
                <div class="main">
                    <div class="practice_info">
                        <h1>{{ practice_info.name }}</h1>
                        <p>
                            {% if practice_info.type==1 %}
                            <span class="layui-badge layui-bg-green">入门</span>
                            {% else %}
                            <span class="layui-badge">高级</span>
                            {% endif %}
                        </p>
                        <p class="practice_remark">
                            {% for item in practice_info.remark.split('|') %}
                            <span style="color: #d2d2d2">{{ item }}</span>
                            {% endfor %}
                        </p>
                    </div>
                    <div class="practice_content">
                        <div>
                            <h1>练习介绍:</h1>
                            <p>{{ practice_info.exercise_introduction }}</p>
                            <h1>题目要求</h1>
                            <p>{{ practice_info.subject_requirements|safe }}</p>
                        </div>
                    </div>
                </div>
                <div class="practice_footer">
                    <button class="layui-btn layui-btn-warm" id="go_run_code">进行练习</button>
                </div>
            </section>
        </div>
        <div class="layui-col-md8" id="practice_defalut_right">
            <div class="practice_rw">
                <blockquote class="layui-elem-quote layui-quote-nm">知识点回顾</blockquote>
                <hr class="layui-bg-black">
                <div>{{ practice_info.review_of_knowledge_points|safe }}</div>
            </div>
        </div>
        <div class="layui-col-md4 hide_div" id="practice_content">
            <div>
                <section>
                    <ul class="layui-timeline">
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">练习介绍</h3>
                                <p>{{ practice_info.exercise_introduction }}</p>
                            </div>
                        </li>
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                            <div class="layui-timeline-content layui-text">
                                <h3 class="layui-timeline-title">题目要求</h3>
                                <p>{{ practice_info.subject_requirements|safe }}</p>
                            </div>
                        </li>
                    </ul>
                </section>
            </div>
        </div>
        <div class="layui-col-md8 hide_div" id="practice_code_mirror">
            <iframe src='/runcode' frameborder="0" scrolling="no" width="100%" height='800px'></iframe>
        </div>
    </div>
</div>
</body>
</html>
<script src="{{ url_for('static',filename='js/jquery-1.12.0.min.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static',filename='layui/layui.js',t='1483944306685') }}" charset="utf-8"
        type="text/javascript"></script>
<script>
    layui.use(['tree', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider', 'util', 'form'], function () {
        var tree = layui.tree //树
            , laypage = layui.laypage //分页
            , table = layui.table //表格
            , element = layui.element //元素操作
            , slider = layui.slider//滑块
            , util = layui.util
            , form = layui.form;
        $('#go_run_code').click(function () {
            $('#practice_defalut_left').addClass('hide_div');
            $('#practice_defalut_right').addClass('hide_div');
            $('#practice_content').removeClass('hide_div');
            $('#practice_code_mirror').removeClass('hide_div');
            $('#practice_outshell').removeClass('hide_div');
        });
    });
</script>